import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Image, Swiper, SwiperItem } from '@tarojs/components'
import { AtSearchBar, AtList, AtListItem, AtTabs, AtTabsPane } from 'taro-ui'
import CTopbar from '../../components/CTopBar/index'
import { get_college_home_page, get_college_banner } from './service'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import CCourseCard from '@/components/CCourseCard'

/**
 * 学院
 */
interface ICurriculumData {
  courseImg: string
  courseName: string
  id: number
  label: string
  price: number
  registrationType: number
}

interface IBannerData {
  advertisementImg: string
  advertisementLink: string
  advertisementSpace: number
  dvType: number
  linkId: number
}

interface I {
  value: string
  curriculumData: ICurriculumData[]
  banner_data: IBannerData[]
  pageNum: number
  pageSize: number
  type: number
}

interface HomeWeek {
  state: I
}
class HomeWeek extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      curriculumData: [],
      banner_data: [],
      pageNum: 1,
      pageSize: 10,
      type: 0,
    }
  }

  // 函数式编程用
  //   usePullDownRefresh(() => {
  //   console.log('wwww');
  // })

  // 对象编程用
  async onPullDownRefresh() {
    await this.get_college_banner()
    await this.get_college_home_page()
    Taro.stopPullDownRefresh()
  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    this.get_college_banner()
    this.get_college_home_page()
  }
  get_college_banner() {
    get_college_banner().then(({ result, data }) => {
      this.setState({
        banner_data: data,
      })
    })
  }
  get_college_home_page() {
    const { pageNum, pageSize, type } = this.state
    const params = {
      pageNum,
      pageSize,
      type: type + 1,
    }
    get_college_home_page(params).then(({ result, data }) => {
      this.setState({
        curriculumData: data,
      })
    })
  }

  onActionClick(searchVal) {
    Taro.navigateTo({
      url: '/pages/QueryResult/index',
    })
  }
  onChangeAtListItem() {
    Taro.navigateTo({
      url: '/pages/ExcellentCourse/index',
    })
  }
  toCourseDetail(id, courseName) {
    const { type } = this.state
    if (type !== 2) {
      Taro.navigateTo({
        url: '/pages/College/CourseDetails/index?id=' + id,
      })
    } else {
      Taro.navigateTo({
        url: '/pages/College/OffLineCourseDetails/index?id=' + id,
      })
    }
  }
  handleClick(value) {
    this.setState(
      {
        curriculumData: [],
        type: value,
      },
      () => {
        this.get_college_home_page()
      },
    )
  }
  onReachBottom() {
    console.log('测试触底事件')
  }

  render() {
    const tabList = [
      { title: '精品好课', en_title: 'New' },
      { title: '线上课程', en_title: 'ON-LINE' },
      { title: '线下课程', en_title: 'OFF-LINE' },
    ]
    const { value, curriculumData, banner_data, type } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='悦心理学院'></CTopbar>
        </View>
        <View className='colleg'>
          <View onClick={this.onActionClick.bind(this)}>
            <AtSearchBar
              actionName='搜索'
              placeholder='请输入测试名称或关键字'
              value={value}
              disabled
              onChange={() => {}}
              onActionClick={() => {}}
            />
          </View>
          <View>
            <Swiper className='swiper_wrapper' indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots autoplay>
              {banner_data === []
                ? banner_data.map((item, index) => {
                    return (
                      <SwiperItem className='swiper_wrapper_item' key={index}>
                        <Image mode={'scaleToFill'} src={item.advertisementImg} />
                      </SwiperItem>
                    )
                  })
                : ''}
            </Swiper>
          </View>
          <View>
            <AtTabs current={type} tabList={tabList} onClick={this.handleClick.bind(this)}>
              {tabList.map((c, i) => {
                return (
                  // index : 切换的索引值 这里与type对应
                  <AtTabsPane key={i} current={type} index={i}>
                    <AtList>
                      <AtListItem
                        onClick={this.onChangeAtListItem.bind(this)}
                        note='不容错过的精彩课程'
                        arrow='right'
                        title={c.en_title}
                        extraText='更多'
                      />
                    </AtList>
                    <View className='week'>
                      {curriculumData.map((currentValue, index) => {
                        return (
                          <View
                            className='wrapper'
                            onClick={this.toCourseDetail.bind(this, currentValue.id, currentValue.courseName)}
                            key={currentValue.id}
                          >
                            <CCourseCard data={currentValue}></CCourseCard>
                          </View>
                        )
                      })}
                    </View>
                  </AtTabsPane>
                )
              })}
            </AtTabs>
            {/* <View className='paddingTop'> </View> */}
          </View>
        </View>
      </View>
    )
  }
}

export default HomeWeek
